<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
  <div>
    <img src="" alt="暂未上传" id="img">
    <progress max="100" value="22"></progress>
    <button id="upload">上传</button>
    <input type="file" name="file" id="file" multiple>
    <script>
      var file = document.getElementById('file')
      var upload = document.getElementById('upload')
      var img = document.getElementById('img')
      var a = document.createElement('a')
      var body = document.body
      file.onchange = function (e) {
        var form = new FormData()
      
            let arr = Array.from(e.target.files)
           for(var i=0;i<arr.length;i++){
             console.log(arr[i])
            form.append('file',arr[i])//file注意多文件格式 单文件file不需要循环
           }
        axios({
          url: 'http://localhost:3000/img1',
          method: 'post',
          data:form,
          headers: {
            "content-type":"multipart/form-data"
          }
        }).then(res => {
          console.log(res)
        })
        console.log(e.target.files)
        if (e.target.files[0].type === 'application/pdf') {
          console.log(URL.createObjectURL(new Blob([e.target.files[0]])))
          let src = URL.createObjectURL(new Blob([e.target.files[0]]))
          a.setAttribute('href',src)
          a.setAttribute('download',e.target.files[0].name)
          body.appendChild(a)
          a.click()
        } else {
          img.setAttribute('src',URL.createObjectURL(new Blob([e.target.files[0]],{type: e.target.files[0].type})))
        }
      }
      upload.addEventListener('click',function () {
        file.click()
      })
    </script>
  </div>
</body>
</html>